<template>
  <div id="app">
    <h2>演示动态组件</h2>
    {{ msg }} 组件的吧
    <input v-model="msg" type="text" />
    <div class="top">
      <div
        v-for="(item, index) in cardArr"
        :key="index"
        class="crad"
        :class="{ highLight: whichIndex == index }"
        @click="
          whichIndex = index;
          componentId = item.componentId;
        "
      >
        {{ item.componentName }}
      </div>
    </div>
    <div class="bottom">
      <!-- keepalive
        用户缓存组件的
        用法就是包裹router-view标签或者是component标签
        它自身有一些属性。比方说
        include  要缓存哪一些
        exclude   不缓存那一些
        max  最多缓存多少个
        当组件被缓存。第一次会执行所有的生命周期以及actived激活状态生命周期
        组件离开会执行。deactivated失去激活状态生命周期
      -->
      <keep-alive :exclude="['One']" :max="2">
        <!-- 动态组件就是用的那个componet标签配合is属性实现的.
          当is属性的值.变成组件的导入的名字.component组件就去加载
        对应的组件 -->
        <component :is="componentId" />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import one from "./components/one";
import two from "./components/two";
import three from "./components/three";
import four from "./components/four";
import { mixins } from "./mixins/index";
export default {
  components: {
    one,
    two,
    three,
    four,
  },
  mixins: [mixins],
  data() {
    return {
      msg: "我是组件的",
      whichIndex: 0,
      componentId: "one",

      cardArr: [
        {
          componentName: "动态组件一",
          componentId: "one",
        },
        {
          componentName: "动态组件二",
          componentId: "two",
        },
        {
          componentName: "动态组件三",
          componentId: "three",
        },
        {
          componentName: "动态组件四",
          componentId: "four",
        },
      ],
    };
  },
  watch: {
    msg: function () {
      console.log("执行msg的msgwatch");
    },
  },
  created() {
    console.log("我是组件的created");
  },
};
</script>

<style lang="scss" scoped>
#app {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 50px;
  .top {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-around;
    .crad {
      width: 20%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background-color: #fff;
      border: 1px solid #e9e9e9;
    }
    .highLight {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -1px, 0);
    }
  }
  .bottom {
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 400px);
    border: 3px solid pink;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
